<template>
  <div class="message">
    <div class="chatItem">
      <div class="avator">
        <img :src="props.user.avatar" mode="" class="img" />
      </div>
      <div class="chatInfo">
        <div class="row">
          <div class="chatName">{{props.user.nickname}}</div>
          <div class="chatTime">{{formatRelativeToNow(store.getLasterMessageTime(user.user_id))}}</div>
        </div>
        <div class="row">
          <div class="lastMessage">{{store.getLasterMessage(user.user_id)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { userStore } from '@/store';
import {formatRelativeToNow} from '@/utils/index'
const store = userStore();
const  props=defineProps({
  user:{
    type:Object,
    default:{}
  }
  
})

</script>

<style lang='less' scoped>
.message {
  height: 100%;
  width: 100%;
}

.chatItem {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  display: flex;
  /* background: rgba(235, 231, 231, 0.719); */
}

.chatItem:hover {
  background: rgb(196, 196, 196);
}

.avator {
  display: flex;
  width: 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
  
}

.avator .img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
}

.chatInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  /*  border-bottom: 1px solid  rgb(250, 245, 245); */
  box-shadow: 0 0.5px 0 rgb(204, 199, 199);
  overflow: hidden;
}

.row {
  height: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.chatName {
  font-size: 20px;
}

.chatTime {
  padding-right: 24px;
  color: rgb(153, 153, 153);
  font-size: 12px;
}

.lastMessage {
  color: rgb(153, 153, 153);
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 70%;
}</style>
